<template>
  <div class="box">
    <div class="div_header">
      <div style="float: left;margin-left: 15%">
        <span class="span_title">联审平台用户和权限管理系统</span>
        <span style="font-size: 14px">{{title_l}}</span>
      </div>
      <div style="float: right;margin-right: 15%">
        <span style="border-right: 2px solid #aaa;font-size: 14px">{{title_r}}</span>
        <span style="color: #3194b9;font-size: 14px; cursor: pointer;" @click="tzEvent">直接登录</span>
      </div>
    </div>
    <div class="div_content">
      <div style="margin: 0 auto;padding: 5% 18% 5% 22%">
        <div>
          <div v-if="!tsBloon">
            <p style="text-align: left;font-size: 18px;" v-if="type === 1">找回账号</p>
            <p style="text-align: left;font-size: 18px;" v-if="type === 2">找回密码</p>
          </div>
          <div v-if="tsBloon">
            <p style="text-align: left;font-size: 18px;">请输入6位数或以上的密码（必须包含大写、小写字母和数字的组合）</p>
          </div>
        </div>
        <el-form :model="addUnitForm" :rules="rules" ref="addUnitForm" label-width="100px">
          <div v-if="!tsBloon">
            <el-form-item label="姓名:" prop="realUser" class="el_w" v-if="type === 1">
              <el-input v-model="addUnitForm.realUser" placeholder="真实姓名" class="inp"></el-input>
            </el-form-item>
            <el-form-item label="身份证号:" prop="idCard" class="el_w" v-if="type === 1">
              <el-input v-model="addUnitForm.idCard" placeholder="请输入身份证" @blur="blurIdcardEvent(addUnitForm.idCard)" class="inp"></el-input>
              <span type="text" v-if="idcardBloon" class="ts_span">身份证格式不正确</span>
            </el-form-item>
            <el-form-item label="账号:" prop="user" class="el_w" v-if="type === 2">
              <el-input v-model="addUnitForm.user" placeholder="请输入账号" @blur="blurIdcardEvent(addUnitForm.user)" class="inp"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="Tele" class="el_w">
              <el-input v-model="addUnitForm.Tele" placeholder="请输入手机号" @blur="blurEvent(addUnitForm.Tele)" class="inp"></el-input>
              <span type="text" v-if="Bloon" class="ts_span">请输入正确的手机号</span>
            </el-form-item>
            <el-form-item label="验证码:" prop="yzm" class="el_w">
              <el-input v-model="addUnitForm.yzm" placeholder="请输入验证码" class="yaninp"></el-input>
              <el-button @click="sendyzmEvent(addUnitForm.Tele)" style="width:100px">发送验证码</el-button>
            </el-form-item>
          </div>
          <div v-if="tsBloon">
            <el-form-item label="新密码:" prop="newPass" class="el_w">
              <el-input v-model="addUnitForm.newPass" type="password" placeholder="请输入新密码" @blur="newPassblurEvent(addUnitForm.newPass)" class="inp"></el-input>
              <span class="ts_span" style="font-size: 14px;" v-if="newPassTs">密码格式不正确</span>
            </el-form-item>
            <el-form-item label="确认新密码:" prop="oldPass" class="el_w">
              <el-input v-model="addUnitForm.oldPass" type="password" placeholder="请再次输入新密码" @blur="oldPassblurEvent()" class="inp"></el-input>
              <span class="ts_span" v-if="oldPassTs">两次密码不匹配，请重新输入</span>
            </el-form-item>
          </div>
        </el-form>
        <el-row style="margin-top: 30px;">
          <el-col :span="12" :offset="3">
            <div class="grid-content bg-purple-dark" style="text-align: center;margin-bottom: 30px">
              <el-button class="sty_butt" type="primary" @click="onLogin(1)" :loading="onLoading" v-if="xybBloon">找回账号
              </el-button>
              <el-button class="sty_butt" type="primary" @click="onLogin(2)" :loading="onLoading" v-if="zhmmBloon">
                找回密码
              </el-button>
              <el-button class="sty_butt" type="primary" @click="onLogin(3)" :loading="onLoading" v-if="wcBloon">完成
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-dialog
          title="密码重置成功"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>你的密码已经重置成功，请用新密码进行登录</span>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="goSign">去登录</el-button>
            </span>
        </el-dialog>

        <el-dialog
          title="找回账号成功"
          :visible.sync="dialogZHVisible"
          width="30%"
          :before-close="handleClose">
          <span>您的账号已通过短信下发至您的手机，请查看并前往首页登录</span>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="goDLSign">去登录</el-button>
            </span>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import {$aos} from "../../store/state";
  import {http} from "../../assets/commonjs/axios";
  import {validateTel, mmyzT, idNumber} from "../../assets/commonjs/utils";

  export default {
    name: "passwordOrname",
    data() {
      return {
        addUnitForm: {
          realUser: '',
          idCard: '',
          user: '',//用户姓名
          yzm: '',//验证码
          Tele: '',//手机号
          newPass: '',//新密码
          oldPass: '',//旧密码
        },
        rules: {
          realUser: [
            {required: true, message: "请填写姓名", trigger: "blur"}
          ],
          idCard: [
            {required: true, message: "请填写身份证号", trigger: "blur"}
          ],
          user: [
            {required: true, message: "请填写账号", trigger: "blur"}
          ],
          yzm: [
            {required: true, message: "请输入验证码", trigger: "blur"}
          ],
          Tele: [
            {required: true, message: "请填写手机号", trigger: "blur"}
          ],
          newPass: [
            {required: true, message: "请填写新密码", trigger: "blur"}
          ],
          oldPass: [
            {required: true, message: "请再填写一遍新密码", trigger: "blur"}
          ],
        },
        type: '',//类型 1 代表忘记用户姓名 2 代表忘记密码
        passToken: '',
        title_l: '',
        title_r: '',
        token: '',
        idcardBloon: false,//控制验证手机号是否符合的提示
        Bloon: false,//控制验证手机号是否符合的提示
        onLoading: false,//点击是的等待状态
        xybBloon: false,//找回用户姓名的控制
        zhmmBloon: false,//找回密码的控制
        wcBloon: false,//完成按钮的显示控制
        tsBloon: false,//找回密码时新旧密码的页码控制（为true显示）
        newPassTs: false,//新密码的格式错误提示
        oldPassTs: false,//再次输入密码确定的错误提示
        dialogVisible: false,
        dialogZHVisible: false,//找回账号弹窗
      }
    },
    created() {
      $aos.getItem('typeNmu').then(res => {
        this.type = res;
        if (this.type === 1) {
          this.title_l = '找回账号'
          this.title_r = '账号已记得？'
          this.xybBloon = true;
        } else if (this.type === 2) {
          this.title_l = '找回密码'
          this.title_r = '已经拥有密码？'
          this.zhmmBloon = true;
        }
      })
    },
    methods: {
      //直接返回登录页
      tzEvent() {
        this.$router.push({path: '/user/login'})
      },
      //验证身份证号是否正确
      blurIdcardEvent(val) {
        if(val){
          let yzjg = idNumber(val);
          if (yzjg) {
            this.idcardBloon = false;
          } else {
            this.idcardBloon = true;
          }
        }
      },
      //验证手机号是否正确
      blurEvent(val) {
        if(val){
          let yzjg = validateTel(val);
          if (yzjg) {
            this.Bloon = false;
          } else {
            this.Bloon = true;
          }
        }
      },
      //新密码验证
      newPassblurEvent(val) {
        if(val){
          let yzjg = mmyzT(val);
          if (yzjg) {
            this.newPassTs = false;
          } else {
            this.newPassTs = true;
          }
        }
      },
      //旧密码与新密码验证是否一致
      oldPassblurEvent() {
        if (this.addUnitForm.newPass === this.addUnitForm.oldPass) {
          this.oldPassTs = false;
        } else {
          this.oldPassTs = true;
        }
      },
      sendyzmEvent(val) {
        http('post', 'permission/get_code_verification', {
          account: this.addUnitForm.user,
          phone: val,
        }).then(res => {
          if (res.data.success) {
            this.$message({message: res.data.msg, type: 'success'});
          } else {
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })

      },

      //下一步
      onLogin(val) {
        if (val === 1) {
          this.$refs.addUnitForm.validate((valid) => {
            if (valid) {
              http('post', 'permission/retrieve_user_name', {
                displayName: this.addUnitForm.realUser,
                userCard: this.addUnitForm.idCard,
                userPhone: this.addUnitForm.Tele,
                verificationCode: this.addUnitForm.yzm
              }).then(res => {
                if (res.data.success) {
                  this.$message({message: res.data.msg, type: 'success'});
                  this.dialogZHVisible = true;
                } else {
                  this.$message({message: res.data.msg, type: 'warning'});
                }
              })
            }
          });
        } else if (val === 2) {
          this.$refs.addUnitForm.validate((valid) => {
            if (valid) {
              http('post', 'permission/get_code_check', {//找回密码接口
                userName: this.addUnitForm.user,
                userPhone: this.addUnitForm.Tele,
                verificationCode: this.addUnitForm.yzm,
              }).then(res => {
                if (res.data.success) {
                  this.passToken = res.data.data;
                  this.zhmmBloon = false;
                  this.wcBloon = true;
                  this.tsBloon = true;
                } else {
                  this.$message({type: "warning", message: res.data.msg})
                }
              })
            }
          });
        } else if (val === 3) {
          this.$refs.addUnitForm.validate((valid) => {
            if (valid) {
              http('post', 'permission/retrieve_password', {//找回密码的新密码修改
                token: this.passToken,
                password: this.addUnitForm.newPass,
              }).then(res => {
                if (res.data.success) {
                  this.dialogVisible = true;
                }
              })
            }
          });
        }
      },
      handleClose() {

      },
      //密码重置成功后的弹窗事件
      goSign() {
        this.dialogVisible = false;
        this.$router.push({path: '/user/login'})
      },
      goDLSign() {
        this.dialogZHVisible = false;
        this.$router.push({path: '/user/login'})
      }
    }

  }
</script>

<style scoped>
  .span_title{
    display: inline-block;
    width: auto;
    text-align: left;
    text-indent: 30px;
    margin-right: 20px;
    font-size: 18px;
    font-weight: bolder;
    background: url('../../assets/images/logo.png') no-repeat left center;
    background-size: 20px;
  }

  .div_header {
    swidth: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #ededed;
    box-shadow: 0 5px 5px #ededed
  }

  .div_content {
    width: 50%;
    border: 1px solid #e4e4e4;
    margin: 5% 0 0 25%;
  }

  .sty_butt {
    margin-left: 30px;
    width: 100%;
    background: #3194b9;
  }
  .el_w {
    width: 100%;
  }
  .inp{
    width: 60%;
  }
  .ts_span {
    display: inline-block;
    width: 38%;
    color: red;
    cursor: default;
  }
  .yaninp{
    width: 38%
  }

</style>
